<template>
   <ul class="tab-bar">
     <li v-for="(item, index) in liArr" :key="index"
     :class="{'active': index === ID}"
     @click="tab">
       {{item}}
     </li>
   </ul>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    liArr: {
      type: Array,
      default () {
        return []
      }
    },
    ID: {
      type: Number
    }
  },
  methods: {
    tab () {
      this.$emit('input', this.ID)
    }
  }
}
</script>

<style scoped lang="scss">
.tab-bar{
  width:100%;
  height:50px;
  line-height: 50px;
  display: flex;
  justify-content: space-around;
  position: sticky;
  top:0;
  left:0;
  background: #fff;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #ededed;
    //transform: scaleY(0.5);
  }
  li{
    flex: 1;
    text-align: center;
  }
}
.active{
  color:#ff5f16;
}
</style>
